﻿@model CountriesModel
@{
    ViewBag.Title = "Selected Options";
}

<h2>Selected Options</h2>

<p>The selectedOptions binding controls which elements in a multi-select list are currently selected. This is intended to be used in conjunction with a &lt;select&gt; element and the options binding.</p>
<p><a href="http://knockoutjs.com/documentation/selectedOptions-binding.html" target="_blank">http://knockoutjs.com/documentation/selectedOptions-binding.html</a></p>

@Html.VisiTogglerFromPartial(CodeSamplePartials.SELECTED_OPTIONS_VIEW_MODEL, Html.CreateVisiToggler("show the samples view model C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))
<br />
@Html.VisiTogglerFromPartial(CodeSamplePartials.SELECTED_OPTIONS_CONTROLLER, Html.CreateVisiToggler("show the samples controller C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))


<h3>Sample #1</h3>
<p>Choose some countries you'd like to visit: <select @Html.KoAttrOptions(m => m.AvailableCountries).KoAttrSelectedOptions(m => m.SelectedCountries) size="5" multiple="true"></select></p>

<p>Countries you like to visit: <span @Html.KoAttrText(m => m.SelectedCountries)></span></p>

@Html.VisiTogglerFromPartial(CodeSamplePartials.SELECTED_OPTIONS1, Html.CreateVisiToggler("show the sample source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))


<p>&nbsp;</p>
<p>Next &gt; @Html.ActionLink("Autocomplete", "Autocomplete", "Examples")</p>


@Model.ApplyBindingsScript(KoBindingOptions.IncludeData)